<template>
  <!-- 销售数据 -->
  <div class="box sku-sale-collect">
    <div class="header">
      <div class="title">销售数据
        <span class="sub-title">{{ monthStart }} ~ {{ monthEnd }}</span>
      </div>
      <div class="week-month-year">
        <div v-for="item in timeList" :key="item" :class="{isChecked : item === isShow}" class="item " @click="timeFn(item)">{{ item }}</div>
      </div>
    </div>
    <div class="charts">
      <div ref="chartAmount" class="chart" />
      <div ref="chartRegion" class="chart" />
    </div>
  </div>
</template>

<script>
import { getAmountCollectAPI, getRegionCollectAPI } from '@/api/workbench'
import echarts from '@/utils/echarts'
import { yearResult, yearStart, monthResult, weeksResult, weeksStart, monthStart, monthEnd, monthRungStart, monthRungEnd } from '@/utils/dayjs'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      timeList: ['周', '月', '年'],
      isShow: '周',
      monthStart,
      monthEnd,
      start: weeksStart(),
      weeksCollect: {},
      resultListX: [],
      resultListY: [],
      weeksx: [],
      monthsx: [],
      yearsx: []
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  async mounted() {
    await this.getWeeksCollect()
    this.amountCollect()
    this.regionCollect()
  },
  methods: {
    // 周
    async getWeeksCollect() {
      const { data } = await getAmountCollectAPI(1, this.start, monthRungEnd)
      data.xAxis.forEach(item => this.weeksx.push(weeksResult(item)))
      this.resultListY = data.series
      this.resultListX = this.weeksx
    },
    // 月
    async getMonthCollect() {
      const { data } = await getAmountCollectAPI(1, this.start, monthRungEnd)
      this.resultListY = data.series
      data.xAxis.forEach(item => this.monthsx.push(monthResult(item)))
      this.resultListX = this.monthsx
    },
    // 年
    async getYernCollect() {
      const { data } = await getAmountCollectAPI(2, this.start, monthRungEnd)
      this.resultListY = data.series
      data.xAxis.forEach(item => this.yearsx.push(yearResult(item)))
      this.resultListX = this.yearsx
    },
    // 曲线图
    amountCollect() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chartAmount)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '销售额趋势图',
          textStyle: {
            fontSize: 14,
            fontWeight: 700,
            fontStyle: 'normal'
          },
          left: 'center',
          top: '2%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'line',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                color: '#d9d9d9',
                global: false
              }
            }
          },
          formatter: function(params) {
            const html = `<div style="height:44px;">
          <div style="font-size:14px;color:#8c8c8c;margin-bottom:16px;line-height:1.5;">
          <div>
           销售额：${params[0].value}
          </div>
          <div>
            ${params[0].name}
          </div>
          </div>
        </div>`
            return html
          }
        },
        grid: {
          top: '20%',
          left: '10%',
          right: '6%',
          bottom: '8%'
        },
        xAxis: [{
          type: 'category',
          axisTick: {
            show: true
          },
          boundaryGap: false,
          data: this.resultListX
        }],
        yAxis: [{
          type: 'value',
          name: '单位：元'
        }],
        series: [{
          type: 'line',
          smooth: true, // 是否平滑
          symbol: 'circle',
          lineStyle: {
            normal: {
              color: 'red'
            }
          },
          itemStyle: {
            color: '#fff',
            borderColor: '#ff5757'
          },
          data: this.resultListY,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [ // 渐变颜色
                {
                  offset: 0,
                  color: '#fe9999'
                },
                {
                  offset: 1,
                  color: '#fff'
                }
              ],
              global: false
            }
          }
        }]
      })
    },
    // 柱形图
    async regionCollect() {
      const { data } = await getRegionCollectAPI(this.start, monthRungEnd)
      const myChart = echarts.init(this.$refs.chartRegion)
      myChart.setOption({
        title: {
          text: '销售额分布',
          textStyle: {
            fontSize: 14,
            fontWeight: 700,
            fontStyle: 'normal'
          },
          left: 'center',
          top: '2%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'none'
          },
          formatter: function(params) {
            const html = `<div style="height:44px;">
          <div style="font-size:14px;color:#8c8c8c;margin-bottom:10px;line-height:1.5;">
          <div>
           销售额：${params.value}
          </div>
          <div>
            ${params.name}
          </div>
          </div>
        </div>`
            return html
          }
        },
        xAxis: {
          type: 'category',
          data: data.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [{
          data: data.series.map(item => (item / 100).toFixed(2)),
          type: 'bar',
          color: '#91b0ff'
        }],
        barWidth: 18
      })
    },
    async timeFn(item) {
      this.isShow = item
      if (item === '周') {
        this.start = weeksStart()
        await this.getWeeksCollect()
        this.amountCollect()
        this.regionCollect()
      } else if (item === '月') {
        this.start = monthRungStart
        await this.getMonthCollect()
        this.amountCollect()
        this.regionCollect()
      } else {
        this.start = yearStart
        await this.getYernCollect()
        this.amountCollect()
        this.regionCollect()
      }
    }
  }
}
</script>

<style scoped lang='scss'>
@import "~@/styles/home.scss";
.chart{
  height: 278px !important;
}
</style>
